import React, { useState } from 'react';
import './zixun.scss';

const Zixun = () => {
  const [val, setVal] = useState('');

  function setValFn(e) {
    console.log(e);
    setVal(e ? e.target.value : '');
  }
  function alertFn(e) {
    setVal(e ? e.target.value : '');
    alert('提交成功！');
  }

  const list = [
    {
      wen: '打呼噜吃什么药最管用?',
      da: '鼻塞需治疗原发疾病，可尝试非处方药物减轻鼻塞，如鼻腔喷雾等。',
    },
    {
      wen: '治疗口腔溃疡小偏方?',
      da: '口腔溃疡用热姜水漱口，每日2～3次，一般6～9次溃疡面即可收敛。',
    },
    {
      wen: '畏寒是风热还是风寒?',
      da:
        '怕冷一般多见于风寒感冒，但风热感冒也可以见到微微怕冷这样的症状。\n' +
        '如果是风寒感冒，一般有怕冷比较重、发热比较轻，会伴有鼻塞、流清鼻涕、打喷嚏、咽痒、咽痒就想咳嗽、咳白稀痰，或痰中夹有少许泡沫、舌淡红、苔薄白等。',
    },
    {
      wen: '脱发严重是什么原因引起的?',
      da: '雄激素性脱发最常见；自身免疫因素如斑秃；突然应激和拔毛癖类精神因素也可造成脱发；某些药物及感染如真菌、细菌感染及外伤头皮形成疤痕导致脱发；长期被牵拉太紧如扎辫子、用力梳头、发夹过紧等也可导致牵拉性脱发。',
    },
    {
      wen: '脾胃不和怎么样调',
      da: '适当运动能增强胃肠蠕动能力和分泌消化液，改善血液循环和新陈代谢，推迟消化系统老化。',
    },
  ];
  return (
    <div className="body">
      <div>
        {list.map((val) => (
          <div className="item">
            <div className="top">
              <div>{val.wen}</div>
            </div>
            <div className="bottom">{val.da}</div>
          </div>
        ))}
      </div>
      <div className="submit">
        <div className="img">在线互动</div>
        <div>
          <span>问题：</span>
          <textarea value={val} onChange={setValFn} rows={6} cols={120} />
        </div>
        <div className="btn" onClick={() => alertFn('')}>
          提交问题
        </div>
      </div>
    </div>
  );
};

export default Zixun;
